<template>
  <div class="collection">
    <div class="l-img-r-text-box" v-for="(o, index) in dataList" :key="o.id">
      <img class="left-img" :src="get_image_url(o.cover)" alt="" />
      <div class="content-box">
        <h5 class="content-title" @click="handleReadAll(o.id)">
          {{ o.title }}
        </h5>
        <div class="content-desc">
          {{ o.remark }}
        </div>
        <el-link
          type="danger"
          class="read-all-btn"
          @click.native="handleReadAll(o.id)"
          >阅读全文</el-link
        >
      </div>
      <div class="article-type">
        {{ o.articleTypeName }}
      </div>
    </div>
    <el-pagination
      background
      class="pagination-box"
      layout="prev, pager, next"
      :current-page.sync="queryInfo.page"
      :page-size.sync="queryInfo.pageSize"
      @current-change="getCollectionDataList"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import axios from "axios";
const BASE_URL = "http://127.0.0.1:8886";
export default {
  name: "Collection",
  data() {
    return {
      queryInfo: {
        page: 1,
        pageSize: 10,
        token: window.localStorage.getItem("token")
      },
      total: 0,
      dataList: []
    };
  },
  created() {
    this.getCollectionDataList();
  },

  methods: {
    get_image_url(id) {
      return BASE_URL + "/images/small/" + id + ".jpg";
    },
    getCollectionDataList() {
      axios({
        method: "GET",
        url: BASE_URL + "/article/getArticleByUser",
        params: this.queryInfo
      }).then(re => {
        const { data: result } = re;
        if (!result.data) return (this.dataList = []);
        this.dataList = result.data;
        this.total = result.total;
      });
    },
    handleReadAll(id) {
      this.$router.push({
        path: `/article-detail/${id}`
      });
    }
  }
};
</script>

<style scoped>
.collection {
  padding-top: 50px;
}
.article-list {
  padding-top: 30px;
  background-color: rgb(240, 240, 240);
  background: url("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4106541136,332060335&fm=26&gp=0.jpg")
    no-repeat;
  background-position: 0 -20px;
}
.l-img-r-text-box {
  display: flex;
  position: relative;
}
.article-type {
  position: absolute;
  padding: 3px 10px;
  background: red;
  color: white;
  right: 0;
  top: -3px;
  font-size: 14px;
  transform: rotate(45deg);
}
.l-img-r-text-box:not(:last-child) {
  padding-bottom: 20px;
  margin-bottom: 40px;
  border-bottom: 1px solid rgb(241, 241, 241);
}

.left-img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 2px;
}
.content-box {
  margin-left: 20px;
  flex: 1;
}
.content-desc {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  position: relative;
  margin-right: 30px;
  font-size: 14px;
  color: rgb(153, 153, 153);
}
.read-all-btn {
  color: red !important;
  float: right;
  margin-top: 20px;
  display: block;
}
.header-sec {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pagination-box {
  text-align: center;
  margin: 30px 0 100px;
}
.pagination-box >>> button {
  background-color: #fff !important;
}
.pagination-box >>> .number {
  background-color: #fff !important;
}
.pagination-box >>> .number:hover {
  background-color: red !important;
  color: #fff !important;
}
.pagination-box >>> .active {
  background-color: red !important;
}
.content-title {
  cursor: pointer;
}
.content-title:hover {
  color: red;
  text-decoration: underline;
}
</style>
